<template>
  <div class="jldlist">
    <el-row>
      <el-col :span="10">
        <el-input v-model="leftKeyWord" placeholder="请输入" @input="leftInput"></el-input>
        <el-table
          :data="leftData"
          border
          ref="multipleTable"
          @select="(selection, row)=> checkAll(selection, row)"
          @select-all="leftSelectAll"
          style="width: 100%"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="sn" label="工号"></el-table-column>
        </el-table>
        <pagination
          :total.sync="leftPage.total"
          :page.sync="leftPage.current"
          :limit.sync="leftPage.size"
          @get-list="leftGetList"
        />
      </el-col>
      <el-col :span="4">
        <div class="opSetting" style="text-align: center;">
          <div @click="handelSelect" style="margin-bottom:10px;">
            <el-button
              icon="el-icon-d-arrow-right"
              :disabled="leftSelectData.length?false:true"
              :size="buttonSize"
              type="primary"
            ></el-button>
          </div>
          <div class="spacing" @click="handleRemoveSelect">
            <el-button
              icon="el-icon-d-arrow-left"
              :disabled="rightSelectRightData.length?false:true"
              :size="buttonSize"
              type="primary"
            ></el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
          <el-input v-model="rightKeyWord" placeholder="请输入" @input="rightInput"></el-input>
        <el-table
          :data="rightData"
          border
          ref="multipleTableRight"
          @select="(selection, row)=> checkAll(selection, row,'rightSelectRightData')"
          @select-all="(selection) => leftSelectAll(selection,'rightSelectRightData','rightData')"
          style="width: 100%"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="sn" label="工号"></el-table-column>
        </el-table>
        <pagination
          :total.sync="rightPage.total"
          :page.sync="rightPage.current"
          :limit.sync="rightPage.size"
          @get-list="rightGetList"
        />
      </el-col>
    </el-row>
  </div>
</template>  
       
<script>
import _ from "lodash";
export default {
  name: "UserManageDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      leftPage: {
        current: 1,
        total: 0,
        size: 10
      },
      rightPage: {
        current: 1,
        total: 0,
        size: 10
      },
      leftKeyWord: "",
      rightKeyWord:"",
      sending: false,
      buttonSize: "large",
      leftDataCache: [], //缓存数据用作搜索
      rightDataCache: [], //缓存数据用作搜索
      leftAllData: [], //总条数
      rightAllData: [],
      leftSelectData: [], // 左边选中列表数据
      rightSelectRightData: [], // 右边选中列表数据
      leftData: [], //选中部门计量点(数据格式自定义或者从后台获取)
      rightData: [] //非选中部门计量点（数据格式自定义或者从后台获取）
    };
  },
  watch: {
    leftAllData(v) {
      if (v) {
        this.leftPage.total = v.length;
        if(this.leftKeyWord) {
            this.leftPage.total = this.leftDataCache.length;
        }
        this.leftGetList();
        if (this.leftData.length < 1 && this.leftPage.current > 1) {
          this.leftPage.current--;
          this.leftGetList();
        }
      }
    },
    rightAllData(v) {
      if (v) {
        this.rightPage.total = v.length;
        if(this.rightKeyWord) {
            this.rightPage.total = this.rightDataCache.length;
        }
        this.rightGetList();
        if (this.rightData.length < 1 && this.rightPage.current > 1) {
          this.rightPage.current--;
          this.rightGetList();
        }
      }
    },
    leftDataCache(v) {
      if (v.length) {
        this.leftPage.total = v.length;
      }
    },
    rightDataCache(v) {
      if (v.length) {
        this.rightPage.total = v.length;
      }
    }
  },
  mounted() {
    this.mockData();
    this.leftData = this.leftAllData.slice(0, this.leftPage.size);
    console.log(this.leftDataCache);
  },
  methods: {
    mockData() {
      for (let i = 0; i < 600; i++) {
        let item = { userName: "admin" + i, sn: i, id: i };
        this.leftAllData.push(item);
      }
    },
    leftGetList() {
      if (this.leftDataCache.length || this.leftKeyWord) {
        this.leftData = this.leftDataCache.slice(
          (this.leftPage.current - 1) * this.leftPage.size,
          (this.leftPage.current - 1) * this.leftPage.size + this.leftPage.size
        );
      } else {
        this.leftData = this.leftAllData.slice(
          (this.leftPage.current - 1) * this.leftPage.size,
          (this.leftPage.current - 1) * this.leftPage.size + this.leftPage.size
        );
      }
      console.log(
        this.leftData,
        (this.leftPage.current - 1) * this.leftPage.size,
        (this.leftPage.current - 1) * this.leftPage.size + this.leftPage.size
      );
      this.toggleSelection();
    },
    rightGetList() {
        if (this.rightDataCache.length || this.rightKeyWord) {
       this.rightData = this.rightDataCache.slice(
            (this.rightPage.current - 1) * this.rightPage.size,
            (this.rightPage.current - 1) * this.rightPage.size + this.rightPage.size
          );
      } else {

          this.rightData = this.rightAllData.slice(
            (this.rightPage.current - 1) * this.rightPage.size,
            (this.rightPage.current - 1) * this.rightPage.size + this.rightPage.size
          );
      }
      this.toggleSelection(
        "rightData",
        "rightSelectRightData",
        "multipleTableRight"
      );
    },
    leftInput() {
      this.leftDataCache = this.leftAllData.filter(v => {
        return v.userName.indexOf(this.leftKeyWord) != -1;
      });
      this.leftPage.current = 1;
      this.leftGetList();
    },
    rightInput() {
      this.rightDataCache = this.rightAllData.filter(v => {
        return v.userName.indexOf(this.rightKeyWord) != -1;
      });
      this.rightPage.current = 1;
      this.rightGetList();
    },
    toggleSelection(
      arr = "leftData",
      select = "leftSelectData",
      table = "multipleTable"
    ) {
      this.$refs[table].clearSelection();
      this[select].map((item, index) => {
        return this[arr].map((v, idx) => {
          if (item.id == v.id) {
            console.log(item.id + "====");
            this.$nextTick(() => {
              this.$refs[table].toggleRowSelection(v);
            });
          }
        });
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      //改表头颜色
      if (rowIndex === 0) {
        return "background-color: #F3F3F3;color: #666;";
      }
    },
    checkAll(selection, row, selectArr = "leftSelectData") {
      // console.log(val)
      // this.leftSelectData = val;
      console.log(selection, row);
      this[selectArr] = this.handleSelectionChange(selection, this[selectArr]);
      let id = null;
      if (!selection.length) {
        id = row.id;
      }
      let flag = selection.some(v => {
        if (v.id == row.id) {
          id = null;
          return true;
        } else {
          id = row.id;
        }
      });
      if (!flag) {
        // 删除取消勾选的
        this[selectArr].some((v, idx) => {
          if (v.id === id) {
            this[selectArr].splice(idx, 1);
            console.log(this[selectArr]);

            return true;
          }
        });
      }
    },
    leftSelectAll(selection, selectArr = "leftSelectData", list = "leftData") {
      console.log(selection);
      if (!selection.length) {
        let arr = this[selectArr].filter(v => {
          let retult = !this[list].some(item => {
            if (item.id == v.id) {
              return true;
            }
          });
          return retult;
        });
        this[selectArr] = arr;
      } else {
        this[selectArr] = this.handleSelectionChange(
          selection,
          this[selectArr]
        );
      }
    },
    checkRightAll(val) {
      this.rightSelectRightData = val;
    },
    /* val:当前选择的 ,multipleSelection:以前选择的*/
    handleSelectionChange(val, multipleSelection = []) {
      let arr = [...multipleSelection, ...val];
      var obj = {};
      arr = arr.reduce(function(item, next) {
        obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
        return item;
      }, []);
      return arr;
    },
    // 移除
    handelSelect() {
      this.rightAllData = this.handleConcatArr(
        this.rightAllData,
        this.leftSelectData
      );
      this.handleRemoveTabList(this.leftSelectData, this.leftAllData);
      if(this.leftDataCache.length){
          this.handleRemoveTabList(this.leftSelectData, this.leftDataCache);
      }
      this.leftSelectData = [];
      this.rightInput()
      //   this.rightGetList();
    },
    // 添加
    handleRemoveSelect() {
      this.leftAllData = this.handleConcatArr(
        this.leftAllData,
        this.rightSelectRightData
      );
      this.handleRemoveTabList(this.rightSelectRightData, this.rightAllData);
      if(this.rightDataCache.length){
          this.handleRemoveTabList(this.rightSelectRightData, this.rightDataCache);
      }
      this.rightSelectRightData = [];
      this.leftInput()
    },
    handleConcatArr(a, b) {
      let arr = [];
      arr = arr.concat(a, b);
      return arr;
    },
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.opSetting {
  text-align: center;
}
</style>